﻿<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>TODO List</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        var model = {
            user: "Jerry",
            items: [
                    { "action": "编写方案文档", done: false },
                    { "action": "面试技术人员", done: false },
                    { "action": "向老板汇报", done: true },
                    { "action": "召开部门会议", done: false }]
        };
        var todoApp = angular.module('todoApp', []);

        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;
        });
    </script>

</head>
<body ng-controller="ToDoCtrl">
    <div class="container">
        <div class="page-header">
            <h1>
                {{todo.user}}的待办事务列表
                <span class="label label-default">{{todo.items.length}}</span>
            </h1>
        </div>

        <div class="well">
            <div class="radio" ng-repeat="button in ['None', 'Table', 'List']">
                <label>
                    <input type="radio" ng-model="todo.mode"
                           value="{{button}}" ng-checked="$first" />
                    {{button}}
                </label>
            </div>
        </div>

        <div ng-switch on="todo.mode">
            <div ng-switch-when="Table">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>描述</th>
                            <th>完成</th>
                        </tr>
                        <tr ng-repeat="item in todo.items">
                            <td>{{$index+1}}</td>
                            <td>{{item.action}}</td>
                            <td><input type="checkbox" ng-model="item.done" /> </td>
                        </tr>
                    </thead>
                </table>
            </div>
            <div ng-switch-when="List">
                <ol>
                    <li ng-repeat="item in todo.items">
                        {{item.action}}
                        <span ng-if="item.complete">(Done)</span>
                        <input type="checkbox" ng-model="item.done" />
                    </li>
                </ol>
            </div>
            <div ng-switch-default>
                请选择某个显示样式！
            </div>
        </div>
    </div>
</body>
</html>
